<template>
  <div>
    <el-container class="container">
      <el-header style="height: 290px">
        <headerCard></headerCard>
      </el-header>
      <el-container class="container-child" :class="{'asideFixed2': asideFixed}">

        
        <el-aside  width="300px" :class="{'asideFixed': asideFixed}"> 
          <div id="fixedNav1">
<MemberExclusive ></MemberExclusive>
          </div>
          

        </el-aside>
        <el-main :class="{'asideFixed1': asideFixed}" >
          <div>
            <MainCard></MainCard>
          </div>
        </el-main>



      </el-container>
    </el-container>
  </div>
</template>

<script>

import MemberExclusive from "@/components/card/MemberExclusiveCard.vue";

import ArticleCard from "@/components/card/ArticleCard.vue";
import headerCard from "./card/headerCard.vue"
import MainCard  from "./card/mainCard.vue"
export default {
  data() {
    return {
      activeName: "1",
      asideFixed: false,

      timer: null


    };
  },
  mounted () {
    window.addEventListener('scroll',this.initHeight1);
    

  },
  methods: {
     initHeight1() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
        let offsetTop = document.querySelector("#fixedNav1").offsetTop;
        scrollTop > 400? (this.asideFixed = true) :(this.asideFixed = false)

    },
  },
  components: {
    ArticleCard,MemberExclusive,headerCard,MainCard
  },
    destroyed(){
        //移除监听
        window.removeEventListener('scroll',this.initHeight1);
    }
};
</script>

<style scoped lang="less">
 .asideFixed{
 position: fixed;
  top: 40px;
  max-height: calc(100vh);
  overflow: auto;
}
.asideFixed1{
   position: relative;
  left: 300px;
  // margin-right: 100px;
  display: block;
  // width: 800px;


}
.asideFixed2{
  width: 73%;
}

.el-header {
  background: rgb(251, 251, 251);
  margin-top: 20px;
}
.el-aside {
  // background-color: rgb(207, 50, 50);
   margin-top: 10px;
  height: 600px;
  // background-color: rgb(255, 255, 255);
 
}
.el-main {
  // background-color: rgb(35, 147, 228);
  
 
  margin-top: 10px;
  margin-left: 10px;
  background-color: #fff;
  width: 70%;
  overflow: visible;

}
.container-child {
  position: relative;

}

</style>